Because when you shadow a variable, it would be unclear to which variable an identifier would refer in the temporal dead zone, especially as variables declared with var are hoisted too. As such let and const are consistent with var as they are also hoisted, but they're more restrictive in situations where var has shown confusing behavior.

 let val = "a";
 {
    console.log(val);
    let val = "b";
 }

Programming languages generally have a tradition like variables should be defined at the top. Behind the scenes JS is a part of this tradition too. It hoists var to the top and sets it to undefined until it's defined. This behaviour might lead unwanted consequences because JS will attempt like it's just a normal variable and try to do something with that undefined however since there is nothing you will get an error. So they introduced let and const keywords to prevent this bad behaviour and said these are also hoists and we set them to uninitiliazedand you can't use them until they're assigned to something because that has no meaning, why would you want to use a variable before it assigned to something?

wall it makes things more clear -sometimes you have to declare the same name of variable multiple times and you don't want to mix up their values

-when you use var it declares on a global scope and after function runs successfully it doesn't clear meemory it stay there in this case if you have many many variables that require too much memory is going to affect on your app performans

in your case:-

     let val = "a"; // this let have globle scope
 {
    console.log(val);
    let val = "b"; // this let have local scope that going to be clear from memory when this brakets endes 
 }

Conclusion:-

var is a global scope
let & const are BLOCK scope that going to be clear after brackets ended